<template>
	<view style="margin-top:30upx;">
		<view class="navbox">
			<view style="padding:20upx;margin-top:30upx;">
				<search />
			</view> 
		</view>
		
		<view class="navbox_xheight"></view>

		<uswiper :height="250" :list="slider" :title="true" :effect3d="true" indicator-pos="bottomCenter" mode="round" :interval="3000" @click="clickSlider"></uswiper>

		<view class="margin-top-40"></view>
		
		<view class="recommendCate" >
			<view class="item" @click="$go.burl('book/list')">
				<image class="icon"  mode="aspectFill" src="../../static/last.png"></image>
				<view class="title">最新</view>
			</view> 
			<view class="item" @click="$go.burl('category/index?gender=1')">
				<image class="icon" mode="aspectFill" src="../../static/nan.png"></image>
				<view class="title">男生</view>
			</view>
			<view class="item" @click="$go.burl('category/index?gender=2')">
				<image class="icon" mode="aspectFill" src="../../static/nv.png"></image>
				<view class="title">女生</view>
			</view>
			<view class="item" @click="$go.burl('category/index')">
				<image class="icon" mode="aspectFill" src="../../static/category.png"></image>
				<view class="title">分类</view>
			</view>
		</view>
		
		<view class="margin-top-20"></view>
		
		<view class="tit" style="margin:20upx;">精品推荐</view>
		
		<view class="recommendlist" >
			<view class="item" v-for="(item,index) in recommends" :key="index" @click="$go.burl('book/detail?id='+item.id)">
				<image class="icon" mode="aspectFill" :src="item.icon"></image>
				<view class="title">{{item.title}}</view>
				<view class="author">{{item.author}}</view>
			</view>
		</view>
		
		<view class="margin-top-40"></view>
		
		<view class="more" @click="$go.burl('book/list')" style="color:#888;font-size:26upx;text-align: center; width:100%;">查看更多</view>
		
		<view class="margin-top-40"></view>
	</view>
</template> 

<script> 
import uswiper from '@/components/uview/u-swiper.vue' ; 
import search from '@/components/public/booksearch.vue' ; 
	
export default {
	components: {
		uswiper,
		search
	},
	computed: {
		top() {
			return this.$ba.safeAreaTop() + this.$ba.navHeight();
		}
	}, 
	data() {
		return {
			slider: [],
			recommends:[],
			
			p:1 ,
			ps:24 ,
			isEnd:false,
		};
	},
	onLoad(){
		this.fetch() ; 
	},
	//上拉触底 加载更多
	onReachBottom() {
		this.fetchRecommends();
	},
	methods: {
		fetch(){
			this.fetchSlider();
			this.fetchRecommends();
		},
		resetData(){
			this.slider = [] ;
			this.recommends = [] ;
			this.p = 1;
			this.ps = 24 ;
			this.isEnd = false ;
		},
		fetchSlider(){
			let post = {};
			post.position = 'slider';
			this.$iapi.vapi('recommendbook/s', post, {
				succ: js => {
					if(!js || !js.list || js.list.length < 1) return ; 
					
					this.slider = [] ; 
					js.list.map(it=>{
						let dd = {} ;
						dd.id = it.id ; 
						dd.image = it.icon ; 
						dd.title = it.title ;
						this.slider.push(dd);
					});
				},
				ever: js => {
				},
			});
		},
		fetchRecommends(){
			if(this._xing) return ;
			if(this.isEnd) return ; 
			
			let that = this ;
			let post = {} ;
			post.position = 'recommend' ; 
			
			if(this.p) post.p = this.p ; 
			if(this.ps) post.ps = this.ps ;
			this._xing = true ; 
			this.$loading.show('加载中');
			this.$iapi.vapi('recommendbook/list', post, {
				succ: js => {
					if(!js || !js.list || js.list.length < 1) return ; 
					
					js.list.map(it=>{
						that.recommends.push(it) ; 
					});
					
					that.p++ ;
					if(js.sum <= (this.p * this.ps)) that.isEnd = true ;
				},
				ever: js => {
					this._xing = false;
					this.$loading.hide() ;
				},
			});
		},
		//登录成功
		succ(online) {
			let that = this;
			that.$tip.show('登录成功', 'succ');
			setTimeout(() => {
				that.$go.back();
			}, 600);
		},
		
		clickSlider(index){
			if(!this.slider[index]) return ; 
			if(!this.slider[index].id) return ; 
			
			return this.$go.burl('book/detail?id='+this.slider[index].id);
		},
		clickToBack() {
			this.$go.back();
		},
		doLogin() {
			this.$refs.accountLogin.doLogin();
		},
		//刷新
		onPullDownRefresh() {
			wx.stopPullDownRefresh();
			this.resetData() ; 
			this.fetch() ;
		},
	}
};
</script>

<style>
	page{
		background-color: #fff;
		padding: 0;
		width:100%;
		overflow-x:hidden;
	} 
	.search{
		width:60%;
	}
	.tit{
		font-size:30upx;font-weight: 600;color:#333;
	}
	.margin-top-20{
		margin-top:20upx;
	}
	.margin-top-40{
		margin-top:40upx;
	}
	.recommendlist{
		display: flex;flex-wrap: wrap;
	}
	.recommendlist .item{
		width:162upx;
		margin-left:20upx;
		margin-top:20upx;
	}
	.recommendlist .item .icon{width:100%;height:220upx;}
	.recommendlist .item .title{font-size:28upx;color:#333;line-height: 38upx;}
	.recommendlist .item .author{font-size:24upx;color:#888;line-height: 50upx;}
	
	.recommendCate{
		display: flex;flex-wrap: wrap;margin-left:-20upx;
		margin:0 auto;
	}
	
	.recommendCate .item{
		width:100upx;
		margin-left:66upx;
	}
	
	.recommendCate .item .icon{width:60upx;height:60upx;margin:10upx auto;display: block;}
	.recommendCate .item .title{font-size:26upx;color:#333;line-height: 38upx;text-align: center; }
	
	.navbox{
		position: fixed;
		top:0px;
		left:0px;
		background: #fff;
		height:140upx;
		width:100%;
		z-index: 99;
	}
	
	.navbox_xheight{
		display: block;
		height:150upx;
	}
</style>
